<template>
  <div id='addtask' > 
      <div  style="padding:20px;">
              <div style="border: 1px solid #eeeeee">
                  <div style="border-bottom: 1px solid #eeeeee">
                        <p class="titlefont">
                          基本信息
                        </p> 
                  </div>
                <div style='padding-right:10px;'>
                  <!-- 任务名称 -->
                    <at-form ref="form" :model="form"  :rules="taskRules" label-width="120px">
                      <at-form-item label="任务名称" prop="task_name" project="mh">
                          <at-input @blur.prevent="istasknamedata()" @focus="getalltaskname()" v-model="form.task_name"></at-input>
                      </at-form-item>
                    <!-- 任务类型 -->
                      <at-form-item label="任务类型" prop="task_type" project="mh">
                        <at-select v-model="form.task_type" @change="changetasktype" plceholder="标志为">
                            <at-option v-for="item in task_type" 
                                       :key="item.value" 
                                       :label="item.label" 
                                       :value="item.value">
                            </at-option>
                        </at-select>
                      </at-form-item>
                      
                      <!-- 不同任务类型 对应不同的任务列表 -->
                      <div v-if= "form.task_type != ''"
                           style="overflow: hidden" 
                           v-for="(task, index) in form.taskdata" 
                           :key = "index">
                        <div v-if="!task.taskkey" style="float:left; margin-left: 10px;">
                          <at-select class="titlename" 
                                     v-model="task.element_type" 
                                     @change="changeElementType(index)"
                                     plceholder="标志为">
                            <at-option v-for="item in task_list.slice(start, end)" 
                                        :key="item.value" 
                                        :label="item.name" 
                                        :value="item.value" 
                                        :disabled="item.disabled"
                                        >
                            </at-option>
                          </at-select>
                        </div>
                        <div v-if="task.taskkey" 
                              style="float: left;
                                    margin-right: 10px;
                                    width: 98px;
                                    font-size: 12px;
                                    text-align: right;
                                    line-height: 30px;
                                    color: #48576a">
                            <p>
                              {{task.element_type=='comprotocals'?
                               '通信协议':task.element_type=='threatname'?
                               '威胁名称':task.element_type=='vulnername'?
                               '漏洞名称':task.element_type=='safelevel'?
                               '安全级别':task.element_type=='node'?
                               '节点':task.element_type }}
                            </p>          
                        </div>
                           <div  
                                  v-if="task.element_type == 'MD5' || 
                                  task.element_type == 'URL' ||
                                  task.element_type == 'domain' ||
                                  task.element_type == 'comprotocals' ||
                                  task.element_type == 'threatname' ||
                                  task.element_type == 'vulnername' ||
                                  task.element_type == ''"  
                                style="float:left; margin-left: 12px; width: 60%;">
                            <at-input v-model="task.element_name" @blur.prevent="fnblur(index)" @focus="getfocue(index)"></at-input>
                          </div>

                          <div style="float: left; margin-left: 10px;" v-if="task.element_type == 'safelevel'">
                            <at-select  v-model ="task.element_name" @change="fnblur(index)"  plceholder="标志为" >
                                <at-option
                                    v-for="item in safelevel"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </at-option>
                            </at-select>
                          </div>
                          
                          <div @click='getallnode' class= 'test' style="float: left; margin-left: 10px; width: 60%;" v-if="task.element_type == 'node'">
                            <at-select  v-model ="task.element_name" @change="fnblur(index)"  plceholder="标志为" >
                                <at-option
                                    v-for="item in tableNode"
                                    :key="item.sys_node_id"
                                    :label="item.sys_node_name"
                                    :value="item.sys_node_name">
                                </at-option>
                            </at-select>
                          </div>

                          <div v-if='isnotAudit' style="float:left;margin-left:10px;"> 
                              <i class='saas-icon-cir-ten addtag' @click="addcontext(index, form.taskdata)"  v-show='index== form.taskdata.length-1' ></i><br>
                              <i class='saas-icon-icon-close deltag' @click="delcontext( index, form.taskdata)"  v-show='index!=form.taskdata.length-1' ></i><br>  
                          </div>
                          
                          
                        </div>
                        <!-- 规则验证 -->
                        <div v-show="this.error" style="font-size: 12px;
                                      color:#e33a51;
                                      margin:10 0px; 
                                      margin-left:120px;
                                      width:100%; 
                                      line-height: 32px;
                                      height: 32px;
                                      text-align: left">
                                      {{this.validateError}}
                          </div>
                      
                      <at-form-item label="任务时间范围" prop="time" project="mh">
                          <at-date-picker v-model="form.time" 
                                          type="datetimerange" 
                                          placeholder="选择时间范围" 
                                          align="right" >
                          </at-date-picker>
                      </at-form-item>
                      <!--  -->
                      <at-form-item label="任务监测范围" prop="selectRange" project="mh">
                          <at-select v-model="form.selectRange"  multiple  plceholder="标志为">
                              <at-option v-for="(item, i) in tableTgencymsg" 
                                        :key="i" 
                                        :label="item.agency_name" 
                                        :value="item.agency_id+ ',' +item.agency_name">
                              </at-option>
                          </at-select>
                      </at-form-item>
                      <at-form-item>
                      </at-form-item>
                  </at-form>
                </div>
              </div>
              <div v-if='this.form.selectRange.length>0'  style="border: 1px solid #eeeeee; margin-top:20px;">
                  <div style="border-bottom: 1px solid #eeeeee">
                        <p class="titlefont">
                          任务目标
                        </p> 
                  </div>
                  <div style="padding: 20px">
                      <div class="tabs">
                        <at-tabs @tab-click="handleClickTag" v-model="activeName"  type="border-card">
                          <at-tab-pane v-for="(item0, index0) in form.selectRange" 
                            :key='index0' 
                            :name="index0.toString()">
                            <span slot="label">{{item0.split(',')[1]}}</span>
                          
                            <div style="overflow:hidden" >
                              <div v-for="(saim,j) in form.taskAim[index0].aims" 
                                   :key='j'>
                                  <div style="margin-bottom:20px; 
                                          float:left; 
                                          width: 88%" 
                                        @click="handleClickTag(index0)"
                                  >
                                   <at-cascader :class="{addtaskcascader: true}" :options="tableTaskcogfig" 
                                             :change-on-select="true" 
                                             @change="ischangeArr(index0)"
                                             v-model="form.taskAim[index0].aims[j]"/>
                              </div>
                              <div style="float:left;margin-left:10px;"> 
                                <i class='saas-icon-cir-ten addtag' @click="addAim(j, form.taskAim[index0].aims)"  v-show='j==form.taskAim[index0].aims.length -1 ' ></i><br>
                                <i class='saas-icon-icon-close deltag' @click="delaims(index0, j, form.taskAim[index0].aims)"  v-show='j!= form.taskAim[index0].aims.length -1' ></i><br>  
                              </div> 
                              </div>
                              
                            </div>
                            <div v-if="errorAim"   style="font-size: 12px;
                                      color:#e33a51;
                                      margin:10 0px; 
                                      width:100%; 
                                      line-height: 32px;
                                      height: 32px;
                                      text-align: left">
                                      {{validateAim}}
                          </div>
                          </at-tab-pane>
                        </at-tabs>
                      </div>
                  </div>
              </div>
              <div style="margin-top:20px; margin-left:32%">
                  <at-button @click="submitForm ('form')" type="primary">确认</at-button>
                  <at-button @click="resetForm ('form')" type="primary">重置</at-button>
              </div>
      </div>
  </div>
 </template>
<script>
import { mapState } from 'vuex'
import { Notification } from 'AtElement'
import $http from '../../../utils/http'
import { taskadd } from './js/taskaddmixins.js'
import { myConsole } from './js/util.js'
export default {
  name: 'taskAdd',
  mixins: [taskadd],
  props: {
    elementId: {
      type: Number,
      default: function () {
        return 0
      }
    }
  },
  data () {
    var timevalidate = (rule, value, callback) => {
      if (value.length === 0 || value[0] === null || value[1] === null) {
        callback(new Error('时间范围选择不能为空！'))
      } else {
        callback()
      }
    }

    var selectRangeValidate = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('任务范围不能为空'))
      } else {
        callback()
      }
    }

    var taskNamevalidate = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('任务名称不能为空'))
      } else if (value.length > 50) {
        callback(new Error('任务名称不能大于50字符'))
      } else if (this.istaskname === true) {
        callback(new Error('任务名称不能重复'))
      } else {
        callback()
      }
    }
    return {
      // 任务的校验规则
      taskRules: {
        // 任务名称
        task_name: [{ required: true, validator: taskNamevalidate, trigger: 'blur' }],
        // 时间选择范围
        time: [{ trigger: 'blur', required: true, validator: timevalidate }],
        // 任务类型
        task_type: [{ trigger: 'blur', required: true, message: '任务类型不能为空' }],
        // 任务选择范围
        selectRange: [
          { trigger: 'blur', required: true, validator: selectRangeValidate }
        ]
      }
    }
  },
  // 监听项
  watch: {
    // 监听任务类型  不同的任务类型对应不同的任务元素项
    'form.task_type' (newName, oldName) {
      myConsole(newName)
      switch (newName) {
        // 深度分析：  MD5
        case '1':
          this.start = 0
          this.end = 1
          this.isnotAudit = true
          break
        // 流量监测： 节点 URL 安全级别 通信协议 MD5 domain 威胁名称
        case '2':
          this.start = 1
          this.end = 8
          this.isnotAudit = true
          break
        // 审计监测： 安全级别
        case '3':
          this.start = 8
          this.end = 9
          this.isnotAudit = false
          break
        // 脆弱性监测： 漏洞名称
        case '4':
          this.start = 9
          this.end = 10
          this.isnotAudit = true
          break
      }
      // 当切换任务类型的时候 ，清空任务列表项
      if (newName !== oldName) {
        this.form.taskdata = [{
          element_type: '',
          element_name: '',
          taskkey: false
        }]
      }
    },
    // 监听任务列表项， 控制安全级别 不能多选， 只支持选一次
    'form.taskdata' (newName, oldName) {
      for (let i = 0; i < newName.length; i++) {
        if (newName[i].element_type === 'safelevel') {
          if (this.form.task_type === '2') {
            this.task_list[7].disabled = true
          } else {
            this.task_list[8].disabled = true
          }
        }
      }
    },
    // 监听任务选择范围， 以至于给同步任务目标的标签页
    'form.selectRange' (newName, oldName) {
      // myConsole(newName)
      this.form.taskAim = []
      if (newName.length !== oldName.length) {
        for (let i = 0; i < newName.length; i++) {
          this.form.taskAim.push({ 'agency': newName[i],
            'aims': [[]] })
        }
      }
    }
  },

  computed: {
    // 获得任务的配置项 节点名称 机构和系统 节点的列表
    ...mapState({
      tableTaskcogfig: state => state.taskManagement.tableTaskcogfig,
      tableTgencymsg: state => state.taskManagement.tableTgencymsg,
      tableNode: state => state.taskManagement.tableNode
    })
  },
  methods: {
    // 当任务元素项的内容获得焦点时， 判断是否先选中任务元素项的列表项
    getfocue (index) {
      let element_type = this.changeElementType(index)
      if (element_type == undefined) {
        this.error = true
        this.validateError = '请先选择任务内容'
      }
    },

    // 当任务元素项的内容失去焦点时，校验任务元素是否符合验证规则
    fnblur (index) {
      // 获取任务元素内容
      let element_name = this.form.taskdata[index].element_name
      // 获取任务元素类型
      let element_type = this.changeElementType(index)
      this.newArr = { 'element_type': '',
        'isarr': false }
      // 校验数组是否重复
      this.removeArr(this.form.taskdata)
      if (element_type) {
        this.form.taskdata[index].taskkey = true
      }
      // 任务元素重复
      if (this.newArr.isarr) {
        this.error = true
        this.validateError = this.taskAimTable[this.newArr.element_type] + '与上一条重复'
      } else {
        if (element_name != '') {
          switch (element_type) {
          // 正则校验MD5
            case 'MD5':
              let remd5 = /([a-fA-F0-9]{32})/
              if (remd5.test(element_name) === false) {
                this.error = true
                this.validateError = 'MD5格式错误， 请重新填写'
              } else {
                this.error = false
                this.validateError = ''
              }
              break
              // 正则校验URL
            case 'URL':
              let lre = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/
              if (lre.test(element_name) === false) {
                this.error = true
                this.validateError = 'URL格式错误， 请重新填写'
              } else {
                this.error = false
                this.validateError = ''
              }
              break
              // 正则校验domian
            case 'domain':
              let domianReg = /^(?=^.{3,255}$)[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/
              if (domianReg.test(element_name) === false) {
                this.error = true
                this.validateError = '域名格式错误， 请重新填写'
              } else {
                this.error = false
                this.validateError = ''
              }
              break
            default:
            // 验证字符长度不能超过50个字符
              if (element_name.length > 50) {
                this.error = true
                this.validateError = '字符长度不能超过50'
              } else {
                this.error = false
                this.validateError = ''
              }
              break
          }
        }
      }
    },

    // 判断所选任务目标不能重复
    ischangeArr (index) {
      this.validateAim = ''
      this.errorAim = false
      for (let i = 0; i < this.form.taskAim[index].aims.length; i++) {
        let arritem0 = this.form.taskAim[index].aims[i]
        for (let j = i + 1; j < this.form.taskAim[index].aims.length; j++) {
          let arritem1 = this.form.taskAim[index].aims[j]
          if (arritem0.toString() == arritem1.toString()) {
            this.validateAim = '所选目标重复'
            this.errorAim = true
            break
          }
        }
      }
    },
    // 当改变任务类型的时候， 校验标志和文案初始化
    changetasktype () {
      this.error = false
      this.validateError = ''
    },
    // 监听要素类型，验证
    changeElementType (index) {
      let element_type = this.form.taskdata[index].element_type
      if (element_type) {
        return element_type
      }
    },
    // 获得有用的数据
    getUsefulData (form) {
      // 任务元素为空
      this.taskElement = []
      // 循环form表单
      for (let item in form) {
        // 取出任务的基本信息：任务名称、任务类型、任务选择范围， 任务的开始时间。要求返回时间， 要素ID
        if (item == 'task_name' ||
              item == 'time' || item == 'task_type') {
          this.addtaskbase['task_name'] = form['task_name']
          this.addtaskbase['task_type'] = form['task_type']
          this.addtaskbase['start_time'] = form['time'][0]
          this.addtaskbase['request_return_time'] = form['time'][1]
          this.addtaskbase['element_id'] = this.elementId
        }
        // 取出任务目标
        else if (item == 'taskAim') {
          for (let j = 0; j < form.taskAim.length; j++) {
            let aimItem = form.taskAim[j].aims
            // 当只选了任务范围的时候，不选系统和节点
            if (aimItem.length == 1 && aimItem[0] == '') {
              this.taskTarget.push({
                'aim_id': form.taskAim[j]['agency'].split(',')[0],
                'aim_name': form.taskAim[j]['agency'].split(',')[1],
                'aim_type': '机构',
                'aim_url': form.taskAim[j]['agency'].split(',')[0]
              })
            } else {
              for (let k = 0; k < aimItem.length; k++) {
                let aimItemitem = aimItem[k]
                // 任务目标选到系统的时候
                if (aimItemitem.length == 1) {
                  if (aimItemitem[0] != '') {
                    this.taskTarget.push({
                      'aim_id': aimItemitem[0].split(',')[0],
                      'aim_name': aimItemitem[0].split(',')[1],
                      'aim_type': '信息系统',
                      'aim_url': form.taskAim[j]['agency'].split(',')[0] + '/' + aimItemitem[0].split(',')[0]
                    })
                  }
                }
                // 任务目标选到设备的时候
                else {
                  if (aimItemitem != '') {
                    this.taskTarget.push({
                      'aim_id': aimItem[k][1].split(',')[0],
                      'aim_name': aimItem[k][1].split(',')[1],
                      'aim_type': '设备',
                      'aim_url': form.taskAim[j]['agency'].split(',')[0] + '/' + aimItem[k][0].split(',')[0] + '/' + aimItem[k][1].split(',')[0]
                    })
                  }
                }
              }
            }
          }
          // 任务元素项
        } else if (item == 'taskdata') {
          if (form['taskdata'][0].element_type != '' && form['taskdata'][0].element_name != '') {
            for (let i = 0; i < form['taskdata'].length; i++) {
              if (form['taskdata'][i].element_type != '' && form['taskdata'][i].element_name != '') {
                this.taskElement.push({
                  'element_type': form['taskdata'][i].element_type,
                  'element_name': form['taskdata'][i].element_name
                })
              }
            }
          } else {
            this.validateError = '请至少填写一项任务内容'
            this.error = true
          }
        }
      }
    },
    // 提交表单
    submitForm (formName) {
      let _this = this
      this.$refs[formName].validate(valid => {
        if (valid) {
          var forms = JSON.parse(JSON.stringify(this.form))
          _this.getUsefulData(forms)
          // 取到任务基本项、任务目标项 、任务元素项
          var taskMsg = {
            'task_msg': JSON.stringify(_this.addtaskbase),
            'task_target': JSON.stringify(_this.taskTarget),
            'task_element': JSON.stringify(_this.taskElement)
          }
          //  在一切校验正确的时候下发任务
          if (!this.error && !this.errorAim) {
            _this.$store.dispatch('taskManagement/addtask', taskMsg)
            _this.resetForm(formName)
            _this.form.taskAim = [{}]
            _this.taskTarget = []
            if (this.elementId) {
              this.$emit('listenSuccessIssuedTask')
            }
          }
        } else {
          return false
        }
      })
    },
    // 重置
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.form.taskdata = [{
        element_type: '',
        element_name: '',
        taskkey: false
      }]
      this.form.taskAim = []
      this.newArr = { 'element_type': '',
        'isarr': false }
      this.validateError = ''
      this.error = false
      this.activeName = '0'
      // 使的安全级别都为可选状态
      this.task_list[7].disabled = false
      this.task_list[8].disabled = false
    },
    // 新增任务元素项
    addcontext (index, arr) {
      // 先判断是否有重复的元素
      this.removeArr(arr)
      let isem = this.newArr.isarr
      // 判断之前任务元素都正确的时候才能新增任务元素项
      if (!this.error && !isem && arr[arr.length - 1].element_name != '') {
        arr.push({ 'element_type': '',
          'element_name': '',
          'taskkey': false })
      } else {
        if (isem) {
          this.error = true
          this.validateError = this.taskAimTable[this.newArr.element_type] + '与上一条重复'
        } else {
          this.validateError = '亲，请先填上一条元素信息'
          this.error = true
        }
      }
    },
    // 删除任务元素项
    delcontext (index, arr) {
      arr.splice(index, 1)
      this.validateError = ''
      this.error = false
    },
    // 新增任务目标项
    addAim (index, arr) {
      if (arr[arr.length - 1].length == 0) {
        this.errorAim = true
        this.validateAim = '亲，请先填上一条目标信息'
      }
      if (!this.errorAim) {
        arr.push([])
      }
    },
    // 删除任务元素项
    delaims (index0, index, arr) {
      arr.splice(index, 1)
      this.ischangeArr(index0)
      this.validateError = ''
      this.error = false
    },
    // 校验任务名称是否一样
    istasknamedata () {
      this.istaskname = false
      for (let i = 0; i < this.tableTaskName.length; i++) {
        if (this.form.task_name == this.tableTaskName[i]) {
          this.istaskname = true
          break
        }
      }
    },
    // 获得任务名称列表
    getalltaskname () {
      $http.post('/api/task/istaskName').then(({ data, status, msg } = {}) => {
        if (status === 'success') {
          if (data.task_name != '') {
            this.tableTaskName = data.task_name
          }
        } else if (status === 'fail') {
				  Notification.error({
            title: '数据获取异常',
            message: msg
				  })
        }
      })
    },
    // 获得所有节点
    getallnode () {
      this.$store.dispatch('taskManagement/getallnode')
    },
    // 切换标签页
    handleClickTag (tab, event) {
      this.errorAim = false
      this.validateAim = ''
      let index = parseInt(this.activeName)
      let sysid = this.form.selectRange[index].split(',')[0]
      this.$store.dispatch('taskManagement/configBaseItems', sysid)
    },
    // 判断数组是否重复
    removeArr (arr) {
      // 将数组归类
      let map = {}
      let dest = []
      for (var i = 0; i < arr.length; i++) {
        var ai = arr[i]
        if (!map[ai.element_type]) {
          dest.push({
            element_type: ai.element_type,
            element_name: [ai.element_name]
          })
          map[ai.element_type] = ai
        } else {
          for (var j = 0; j < dest.length; j++) {
            var dj = dest[j]
            if (dj.element_type == ai.element_type) {
              dj.element_name.push(ai.element_name)
              break
            }
          }
        }
      }
      // 验明数组是否重复
      for (let i = 0; i < dest.length; i++) {
        if (dest[i].element_name.length > 1) {
          let arrnum = dest[i].element_name
          let res = false
          var nary = arrnum.sort() // 用到了排序
          for (var z = 0; z < arrnum.length; z++) {
            if (nary[z] == nary[z + 1]) {
              res = true
              break
            }
          }
          if (res) {
            this.newArr = {
              'element_type': dest[i].element_type,
              'isarr': true
            }
          } else {
            this.newArr = {
              'element_type': '',
              'isarr': false
            }
          }
        }
      }
    }

  },
  mounted () {
    this.$store.dispatch('taskManagement/getallagency')
    // 判断要素来源， 不同的任务类型
    if (this.elementId == 0) {
      this.task_type = [{
        value: '1',
        label: '深度分析任务'
      }, {
        value: '2',
        label: '流量监测任务'
      }, {
        value: '3',
        label: '审计监测任务'
      }, {
        value: '4',
        label: '脆弱性监测任务'
      }]
    } else {
      this.task_type = [{
        value: '1',
        label: '深度分析任务'
      }, {
        value: '2',
        label: '流量监测任务'
      }, {
        value: '4',
        label: '脆弱性监测任务'
      }]
    }
  }
}
</script>
<style lang='less'>
@import './style/addtask.less';


</style>

<style>
 .at-cascader-menus .at-cascader-menu{
  min-width: 190px;
}

 .at-cascader-menu .at-cascader-menu__item--extensible{
  background-position-x: 170px;
}
</style>